<template>
  <div>
    <div class="config-table">
      <el-button
        class="button-sure btn-sure"
        size="default"
        icon="CirclePlus"
        :disabled="addDisable"
        @click.stop="addNewRow()"
      >
        {{ $demoi18n('btn.add') }}
      </el-button>
      <el-table
        class="config-panel-table"
        :data="shapeForm.data"
        :row-style="{ height: '25px' }"
        :header-row-style="{ height: '25px' }"
        max-height="235"
        :header-cell-style="{ lineHeight: '15px' }"
      >
        <el-table-column
          type="index"
          :label="$demoi18n('word.serialNumber')"
          width="45"
        ></el-table-column>
        <el-table-column
          prop="value"
          :label="$demoi18n('word.numValue')"
          min-width="100"
        >
          <template #header="{column}">
            <ThCell :label="column.label" />
          </template>
          <template #default="scope">
            <VsFormItem
              :prop="`data[${scope.$index}].value`"
              :rules="
                generateRules({
                  required: false,
                })
              "
            >
              <ValueInputer
                v-model:value="scope.row.value"
                :enum-values="nameList"
              />
            </VsFormItem>
          </template>
        </el-table-column>

        <el-table-column
          prop="icon"
          :label="$demoi18n('word.shape')"
          width="45"
        >
          <template #header="{column}">
            <ThCell :label="column.label" />
          </template>
          <template #default="scope">
            <IconEditor
              :icon="scope.row.icon"
              :component-style="form.componentStyle"
              mode="serverImg"
              @save="saveIcon($event, scope.row)"
              @delete="deleteIcon($event, scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          width="40"
          :label="$demoi18n('word.operation')"
        >
          <template #header="{column}">
            <ThCell :label="column.label" />
          </template>
          <template #default="scope">
            <el-button
              icon="Delete"
              :link="true"
              type="primary"
              :disabled="delDisable"
              @click.stop="deleteCurRow(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import imgUploadBase from '@/mixin/img-upload-base';
import { generateRules } from '@/utils/rules';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import IconEditor from '@/components/common/icon/icon-editor.vue';
import ThCell from '@/components/common/th-cell/th-cell.vue';

export default {
  name: 'ShapeSetting',
  components: { ValueInputer, IconEditor, ThCell },
  mixins: [imgUploadBase],
  props: ['form', 'shapeForm', 'shapeData', 'config', 'activeColorRadio', 'nameList'],
  data() {
    return {
      item: {
        value: '',
        icon: '',
        iconSmall: '',
        uploadList: [],
        imgUrl: '',
      },
      valueOptions: [],
      count: 0,
      min: 0,
      max: 1,
      delDisable: false,
      addDisable: false,
      xvueTheme: window._adoPremise.uc.theme, // 'dark',
    };
  },
  computed: {
    thisComp() {
      return this;
    },
  },
  watch: {},
  methods: {
    generateRules,
    checkValue() {
      const valueArray = this.shapeForm.data.map(data => data.value).filter(data => data !== '');
      const valueSet = new Set(valueArray);
      valueSet.delete('');
      if (valueSet.size < valueArray.length) {
        this.$message.error(this.$demoi18n('panel.shapeSetting.duplicateOptionVal'));
        return false;
      }
      return true;
    },
    addNewRow() {
      const temp = JSON.parse(JSON.stringify(this.item));
      this.shapeForm.data.push(temp);
    },
    deleteCurRow(item) {
      const index = this.shapeForm.data.indexOf(item);
      this.shapeForm.data.splice(index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
.config-table {
  padding: 0 10px;
  :deep(.el-table) {
    .el-form-item__error {
      top: 100%;
      padding-top: 0;
    }
    .is-error {
      margin-bottom: 15px !important;
    }
    .cell {
      padding: 0 3px !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .el-input__inner {
        padding: 0 5px !important;
      }
    }
    td,
    th {
      padding: 5px 0 !important;
      overflow: hidden;
    }
    th div {
      display: inline;
      line-height: 15px;
    }
    .el-table__row > td {
      border: none;
    }
  }
  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
}
</style>
